import { readable } from "svelte/store";
import type { SvelteComponent } from "svelte";
import CheckCircleIconOutline from "./CheckCircleIconOutline.svelte";
import CogIconOutline from "./CogIconOutline.svelte";
import CompanyIconOutline from "./CompanyIconOutline.svelte";
import CubeIconOutline from "./CubeIconOutline.svelte";
import DatabaseIconOutline from "./DatabaseIconOutline.svelte";
import DownIconOutline from "./DownIconOutline.svelte";
import DocumentIconOutline from "./DocumentIconOutline.svelte";
import ExclamationCircleIconOutline from "./ExclamationCircleIconOutline.svelte";
import MenuIconOutline from "./MenuIconOutline.svelte";
import PencilAltIconOutline from "./PencilAltIconOutline.svelte";
import PlusCircleIconOutline from "./PlusCircleIconOutline.svelte";
import PlusIconOutline from "./PlusIconOutline.svelte";
import PuzzleIconOutline from "./PuzzleIconOutline.svelte";
import RightIconOutline from "./RightIconOutline.svelte";
import ShareIconOutline from "./ShareIconOutline.svelte";
import SwitchHorizontalIconOutline from "./SwitchHorizontalIconOutline.svelte";
import FolderIconOutline from "./FolderIconOutline.svelte";
import TrashIconOutline from "./TrashIconOutline.svelte";
import UploadIconOutline from "./UploadIconOutline.svelte";
import UserIconOutline from "./UserIconOutline.svelte";
import UserGroupIconOutline from "./UserGroupIconOutline.svelte";
import XCircleIconOutline from "./XCircleIconOutline.svelte";


export const IconSize = {
  sm: "w-4 h-4",
  ["sm+"]: "w-6 h-6",
  md: "w-8 h-8",
  ["md+"]: "w-10 h-10",
  lg: "w-12 h-12",
  ["lg+"]: "w-14 h-14",
  xl: "w-16 h-16",
  ["2xl"]: "w-18 h-18",
  ["3xl"]: "w-20 h-20",
  ["4xl"]: "w-24 h-24",
  default: "w-8 h-8",
}

export type IconItem = {
  name: string;
  component: typeof SvelteComponent;
};
const _icons: IconItem[] = [
  {
    name: "check-circle",
    component: CheckCircleIconOutline,
  },
  {
    name: "cog",
    component: CogIconOutline,
  },
  {
    name: "company",
    component: CompanyIconOutline,
  },
  {
    name: "cube",
    component: CubeIconOutline,
  },
  {
    name: "database",
    component: DatabaseIconOutline,
  },
  {
    name: "down",
    component: DownIconOutline,
  },
  {
    name: "doc",
    component: DocumentIconOutline,
  },
  {
    name: "exclamation-circle",
    component: ExclamationCircleIconOutline,
  },
  {
    name: "menu",
    component: MenuIconOutline,
  },
  {
    name: "pencil-alt",
    component: PencilAltIconOutline,
  },
  {
    name: "plus",
    component: PlusIconOutline,
  },
  {
    name: "plus-circle",
    component: PlusCircleIconOutline,
  },
  {
    name: "puzzle",
    component: PuzzleIconOutline,
  },
  {
    name: "right",
    component: RightIconOutline,
  },
  {
    name: "share",
    component: ShareIconOutline,
  },
  {
    name: "switch-horizontal",
    component: SwitchHorizontalIconOutline,
  },
  {
    name: "trash",
    component: TrashIconOutline,
  },
  {
    name: "folder",
    component: FolderIconOutline,
  },
  {
    name: "upload",
    component: UploadIconOutline,
  },
  {
    name: "user",
    component: UserIconOutline,
  },
  {
    name: "user-group",
    component: UserGroupIconOutline,
  },
  {
    name: "x-circle",
    component: XCircleIconOutline,
  },
];

const _defaults = {
  className: "h-6 w-6",
  viewBox: "0 0 24 24",
};

export const defaults$ = readable(_defaults);

export const icons$ = readable<IconItem[]>(_icons);
